import UsersApi from "../api/users.js";
import Base from "./base.js";

export default class extends Base {

    // 渲染函数
    render() {
        this.$el.html(`
            <style>
            html{
                width:100%;
                height:100%;
            }
            body {
                width:100%;
                height:100%;
                background-image: url("resource/login/21fab9895366915c6dd53e51b9630792.jpeg");
                background-repeat: repea;
                background-size: 100% 100%; 
            }
            #app{
                height:100%
            }
            .reg-screen{
                width: 300px;
                height: 300px;
                padding: 30px;
                font-size: 20px;
                background-color: rgba(255, 255, 255, 0.2);
                position: fixed;
                top:50%;
                left:50%;
                margin-top:-200px;
                margin-left:-150px;
                border-radius:8px;
            }
            </style>
            <div class="reg-screen" style=""> 
                <h1 style="margin:0px auto 18px;color:#ffff;font-size:24px;">用户登录</h1>
                <input type="text" name="username"  placeholder="请输入注册账号" class="layui-input" style="margin-bottom:30px">
                <input type="password" name="password" placeholder="请输入注册密码" class="layui-input" style="margin-bottom:30px">
                <div style="color:#b19b9b; margin-bottom:30px; display:flex; justify-content:space-between;">
                    <button style="color:#1e9fff; background-color:transparent; font-size:14px; border:none;">忘记密码?</button>
                    <button name="reg-btn" style="color:#1e9fff; background-color:transparent; font-size:14px; border:none;">注册</button>
                </div>
                <button name="login-btn" type="button" class="layui-btn layui-btn-normal" style="width:300px;font-size:16px">登录</button>
            </div>
  
    `);
        // 获取用户名输入和密码框输入节点
        this.$usernameEle = $("input[name=username]");
        this.$passwordEle = $("input[name=password]");
        // 获取登录注册按钮
        this.$loginBtn = $("button[name=login-btn]");
        this.$regBtn = $("button[name=reg-btn]");
    }

    // 登录按钮事件
    async loginHandle() {
        // 获取用户名和密码
        const username = this.$usernameEle.val();
        const password = this.$passwordEle.val();

        const { status, token,info } = await UsersApi.login({ username, password });
        if (status) {
            // 储存token
            UsersApi.setToken(token);
            layer.msg(`登录成功`, { icon: 1 });
            location.hash = "#/info";
            // 存储用户ID
            sessionStorage.setItem("usersID",info._id)
            return;
        }else{
            layer.msg("登陆失败", { icon: 2 });
        }
       
    }

    // 注册事件
    regHandle(e) {
        let event = e || window.event;
        event.preventDefault();
        location.hash = "#/reg";
    }

    // 登录、注册绑定事件
    handle() {
        this.$loginBtn.on("click", this.loginHandle.bind(this));
        this.$regBtn.on("click", this.regHandle.bind(this));   
    }
}